Vue 动态引入外部js文件

2024-07-01 08:54| 来源: 网络整理| 查看: 265

场景

最近在做项目优化时，发现一个特殊依赖，全局只有一个页面会用到。这个依赖很大，而且这个页面极少有人会打开（隐藏页，留给开发或交付人员调试使用的）。

那么我们考虑通过引入外部js的形式来处理，一是不打开这个页面没必要加载对应的依赖，二是减少打包体积。

实现方式一

在index.html中引入

问题：全局初始化加载，不打开对应页面的话用不到，资源浪费

方式二

使用import方式引入

import { xxx } from '../xxx.js'

问题：只能导入本地静态文件

方法三

手动插入js

// 动态加载外部链接 export function loadJS(url) { return new Promise((resolve) => { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; // IE if (script.readyState) { script.onreadystatechange = () => { if (script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadystatechange = null; resolve(); } }; } else { // 其他浏览器 script.onload = function () { resolve(); }; } document.getElementsByTagName('head')[0].appendChild(script); }) } 方法四

render-components的方式

export default { components: { 'load-xxx-js': { render(createElement) { return createElement( 'script', { attrs: { type: 'text/javascript', src: '/xxx.js',//路径 }, }, ); }, }, }, }

【本文地址】

公司简介

联系我们